import type { Dayjs } from "dayjs";
import { useEffect, useRef, useState } from "react";
import dayjs from "dayjs";
import weekOfYear from "dayjs/plugin/weekOfYear";
import quarterOfYear from "dayjs/plugin/quarterOfYear";
import { cn } from "./helpers/utils";
import type { TaskProps } from "./types";
import GanttProvider from "./components/gantt-provider";

// 扩展dayjs插件
dayjs.extend(weekOfYear);
dayjs.extend(quarterOfYear);

export interface GanttProps {
  title?: string;
  className?: string;
  taskList: TaskProps[];
  tasksStart: Dayjs;
  tasksEnd: Dayjs;
}

export default function TaskGantt(props: GanttProps) {
  const { title, className, taskList, tasksStart, tasksEnd } = props;
  const taskTitle = title ? title : "Gantt Task";

  const [containerWidth, setContainerWidth] = useState(0);
  const [containerHeight, setContainerHeight] = useState(0);
  const [hideTaskTable, setHideTaskTable] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      setContainerWidth(containerRef.current.clientWidth);
      setContainerHeight(containerRef.current.clientHeight);
    }
  }, []);

  return (
    <GanttProvider
      tasksList={taskList}
      tasksStart={tasksStart}
      tasksEnd={tasksEnd}
      containerHeight={containerHeight}
      containerWidth={containerWidth}
      hideTaskTable={hideTaskTable}
      setHideTaskTable={setHideTaskTable}
    >
      <div
        className={cn("flex flex-col relative", className)}
        ref={containerRef}
      >

      </div>
    </GanttProvider>
  );
}
